<template>
  <div v-loading="loading" class="departments">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <TreeTools :node-data="titleData" @on-open="toggleFn" />
        <!-- 树形组件结构 -->
        <el-tree :data="departs" :props="defaultProps">
          <!-- 中间的代码就是插槽内容，用于定制每一行的布局效果 -->
          <template v-slot="scope">
            <TreeTools :node-data="scope.data" @on-success="onSuccessFn" @on-open="toggleFn" />
          </template>
        </el-tree>
      </el-card>
    </div>
    <!-- 下拉部门菜单的弹出框-->
    <AddDept
      :operate-flag="operateFlag"
      :is-show-dept.sync="isShowDept"
      :dlist="dlist"
      :dept-id="currentDeptId"
      @on-success="onSuccessFn"
    />
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import AddDept from './components/AddDept.vue'
import { reqGetDepartmentsAPI } from '@/api/departments'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // 网络请求的加载状态
      loading: false,
      // 控制点击的添加部门还是编辑部门
      operateFlag: '',
      // 部门的原始数据
      dlist: [],
      // 得到当前点击添加部门的id
      currentDeptId: '-1',
      // 控制弹出框的显示与隐藏
      isShowDept: false,
      // 标题的数据
      titleData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        root: true, // 控制是否是标题
        id: ''
      },
      // 部门列表
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  created() {
    this.loadDepartmentsList()
  },
  methods: {
    // 控制弹窗的回调
    toggleFn(obj) {
      // 得到当前点击添加部门的id
      this.currentDeptId = obj.id
      this.operateFlag = obj.type
      // 打开弹窗
      this.isShowDept = true
    },
    onSuccessFn() {
      // 重新调用获取列表数据的函数
      this.loadDepartmentsList()
    },
    // 加载部门列表数据
    async loadDepartmentsList() {
      try {
        // 发送请求之前
        this.loading = true
        const res = await reqGetDepartmentsAPI()
        // 如果状态码为10000
        if (res.code === 10000) {
          // 原始数据
          this.dlist = res.data.depts
          // 后台的返回的数据赋值给原数据
          this.departs = this.translateListToTreeData(res.data.depts, '')
          // 后台返回的标题名赋值给原标题
          this.titleData.name = res.data.companyName
        }
      } catch (error) {
        this.$message.error('获取数据失败')
      } finally {
        // 发送请求结束之后
        this.loading = false
      }
    },
    // 封装一个列表数据转换成树形数据的函数
    // list 列表数据
    // id是传的pid
    // 根据当前部门(根据部门id)找到所属部门的所有子部门
    translateListToTreeData(list, id) {
      // 遍历每一个元素,判断数据列表中的pid是否与参数的id是否一致,这样可以找到参数pid所属的下属部门
      const arr = []
      list.forEach(item => {
        // 判断item里面的pid是否与参数id一致
        if (item.pid === id) {
          // 如果当前部门和父级部门匹配，再去找当前部门的下级部门
          // children就是item的下级所有部门
          const children = this.translateListToTreeData(list, item.id)
          // 判断children的是否有值
          if (children.length > 0) {
            // 就把值赋值给原数据的children
            item.children = children
          }
          // 如果item里面的pid与参数id不一致
          // 就是没有子部门,直接push到数组中
          arr.push(item)
        }
      })
      // 直接返回一个新的数组
      return arr
    }
  }
}
</script>

<style scoped>
  .tree-card {
    padding: 30px 30px;
    font-size: 14px;
  }
</style>
